<template>
	<div class="move-max">
		<!-- 头部导航 -->
		<div class="move-header">
			<van-nav-bar :title="list.name" left-arrow @click-left="onClickLeft" />
		</div>
		<!-- 主体部分 -->
		<div class="move-main">
			<!-- 影片头部 -->
			<div class="move-top">
				<div class="move-top-right">
					<img v-lazy="baseUrl + list.avatar" alt="" />
				</div>
				<div class="move-top-left">
					<div class="move-name">{{ list.name }}</div>
					<div>{{ list.englishName }}</div>
					<div>{{ list.category }}</div>
					<div>{{ list.pubDesc }} | {{ list.duration }}分钟</div>
					<!-- <div>主演：{{ list.stars }}</div> -->
					<div class="move-score">
						评分：<em>{{ list.score }}</em>
					</div>
				</div>
			</div>
			<!-- 影片介绍 -->
			<div class="move-introduce">
				<div class="move-introduce-top">影片介绍</div>
				<div>
					{{ list.description }}
				</div>
			</div>
			<!-- 演员列表 -->
			<div class="move-performer">
				<div class="move-performer-top">
					<span class="performer"> 演职人员 </span>
					<span>({{ performerLenght }})</span>
				</div>
				<!-- 演员头像 -->
				<div class="move-performer-head">
					<van-swipe :show-indicators="false" :loop="false" width="100">
						<van-swipe-item v-for="item in list.celebrities" :key="item.imgId">
							<div class="box">
								<img v-lazy="baseUrl + item.avatar" />
								<span class="t">{{ item.name }}</span>
								<span class="p">{{ item.role }}</span>
							</div>
						</van-swipe-item>
					</van-swipe>
				</div>
			</div>
			<!-- 剧照 -->
			<div class="move-stills">
				<div class="move-stills-top">
					<span class="performer"> 剧照 </span>
					<span>({{ photosLenght }})</span>
				</div>
				<div class="move-stills-photos">
					<div v-for="item in list.photos" :key="item.id">
						<img v-lazy="baseUrl + item.olonk" />
					</div>
				</div>
			</div>
		</div>
		<!-- 底部订票按钮 -->
		<div>
			<van-goods-action>
				<van-goods-action-button type="danger" text="加入购物车" @click="onClickButton" />
			</van-goods-action>
		</div>
	</div>
</template>

<script>
	import { detailsMovieApi } from "../../apis/details";
	import { getProductInfo } from "../../apis/indexApi";
	export default {
		data() {
			return {
				id: 341955,
				list: "",
				performerLenght: "",
				photosLenght: "",
				swipeWidth: 300,
				baseUrl: 'http://10.7.162.81:15666',
				product: []
			};
		},

		mounted() {
			let newId = this.$route.params.id;
			this.product = this.$route.params.item
			if (newId) {
				this.id = newId;
			}
			detailsMovieApi(this.id).then((d) => {
				let cunt = 0;
				d.data.celebrities.map((it) => {
					cunt++;
					return (it.imgId = "00" + cunt);
				});
				this.list = d.data;
				this.performerLenght = this.list.celebrities.length;
				this.photosLenght = this.list.photos.length;
			});
		},
		methods: {
			onClickLeft() {
				// this.$router.push("/index/home");
				this.$router.go(-1);
			},
			onClickButton() {
				let data = {
					userId: this.$store.getters['common/user'].id,
					price: this.product.price,
					id: this.product.id,
					time: new Date(),
					count: 1,
					name: this.product.name,
					detailaddress: '无',
					bgUrl: this.product.imgUrl
				}
				getProductInfo(data).then(resolve => {
					if (resolve.code === 200) {
						this.$toast('加入购物车成功');
					} else {
						this.$toast('加入购物车失败');
					}
				})
			},
		},
	};
</script>
<style lang="less" scoped>
	.move-max {
		font-size: 12px;
		height: 100%;

		.move-header {
			height: 50px;
		}

		.move-main {
			background: rgb(225, 225, 225);
			height: calc(100% - 50px - 50px);
			overflow-x: hidden;

			.move-top {
				width: 100%;
				height: 25%;
				display: flex;
				justify-content: space-around;
				padding: 10px;
				background: white;

				.move-top-right {
					width: 30%;

					img {
						width: 100%;
						height: 100%;
					}
				}

				.move-top-left {
					width: 60%;
					height: 100%;
					display: flex;
					flex-direction: column;
					justify-content: space-around;

					.move-name {
						font-size: 15px;
						font-weight: 900;
					}

					.move-score {
						em {
							font-size: 15px;
							color: red;
							font-weight: 900;
						}
					}
				}
			}

			.move-introduce {
				font-size: 13px;
				margin-top: 5px;
				padding: 5px;
				width: 100%;
				background: white;

				.move-introduce-top {
					font-size: 15px;
					font-weight: 500;
					margin-bottom: 2px;
				}
			}

			.move-performer {
				margin-top: 5px;
				width: 100%;
				background: white;
				padding: 5px;

				.move-performer-top {
					.performer {
						font-size: 15px;
						font-weight: 500;
					}
				}

				.move-performer-head {
					height: 100%;

					.box {
						height: 100%;
						padding: 5px;

						img {
							width: 100%;
							height: 130px;
						}

						.p,
						.t {
							display: block;
							text-align: center;
						}
					}
				}
			}

			.move-stills {
				margin-top: 5px;
				width: 100%;
				background: white;
				padding: 5px;

				.move-stills-top {
					.performer {
						font-size: 15px;
						font-weight: 500;
					}
				}

				.move-stills-photos {
					display: flex;
					flex-wrap: wrap;
					justify-content: space-around;

					>div {
						width: 45%;
						height: 100px;
						padding: 2px;

						img {
							width: 100%;
							height: 100%;
						}
					}
				}
			}
		}
	}
</style>
